<script setup lang="ts">

import { onMounted, reactive, ref } from 'vue'
import type { PageInfo, Result } from '@/tools/request'
import {type FileItem, Message, Modal } from '@arco-design/web-vue'
import type { WorkTravelPay } from '@/api/work/workTravelPay.d'
import {
  workTravelPayAdd,
  workTravelPayById, workTravelPayList,
  workTravelPayModify,
  workTravelPayRemove,  workTravelPayRemoveBatch
} from '@/api/work/workTravelPay'
import { useGlobalStore } from '@/stores/global'


//使用缓存
const cache = useGlobalStore().cache
const cacheMap = useGlobalStore().cacheMap

//表单部分
const workTravelPayFormRef = ref()
const workTravelPayForm = reactive({
  //搜索表单
  query: {
    workTravelId: null,

  } as WorkTravelPay,
  submitQuery: () => {
    workTravelPayList(workTravelPayForm.query, {
      pageNum: workTravelPay.pageInfo.pageNum,
      pageSize: workTravelPay.pageInfo.pageSize
      //@ts-ignore
    }).then((resp: Result<PageInfo<WorkTravelPay>>) => {
        workTravelPay.pageInfo = resp.data
      }
    )
  },
  //新增修改表单
  form: {
    id: null,
    workTravelId: null,
    money: null,
    remark: null,
    isInvoice: null,
    payTime: null,
    createBy: null,

  } as WorkTravelPay,
  submitForm: ({ values, errors }: any) => {
    if (errors) return
    //修改
    if (workTravelPayForm.form.id) {
      workTravelPayModify(workTravelPayForm.form).then(() => {
        Message.success('修改工作出差支付成功')
        workTravelPayForm.visible = false
        workTravelPayForm.submitQuery()
      })
      return
    }
    //新增
    workTravelPayAdd(workTravelPayForm.form).then(() => {
      Message.success('新建工作出差支付成功')
      workTravelPayForm.visible = false
      workTravelPayForm.submitQuery()
    })
  },
  //弹出层title
  formTitle: '新增工作出差支付',
  //是否显示新增修改表单
  visible: false
})

const workTravelPay = reactive({
  pageInfo: {} as PageInfo<WorkTravelPay>,
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  },
  getList: (current: number) => {
    workTravelPayList(workTravelPayForm.query, {
      pageNum: current,
      pageSize: workTravelPay.pageInfo.pageSize
      //@ts-ignore
    }).then((resp: Result<PageInfo<WorkTravelPay>>) => {
      workTravelPay.pageInfo = resp.data
    })
  },
  selectKeys: [] as string[],
  add: () => {
    //新增工作出差支付
    workTravelPayFormRef.value!.resetFields()
    workTravelPayForm.formTitle = '新增工作出差支付'
    workTravelPayForm.visible = true
    workTravelPayForm.form.id = null
  },
  edit: (workTravelPay: WorkTravelPay) => {
    //编辑工作出差支付
    workTravelPayFormRef.value!.resetFields()
    workTravelPayForm.formTitle = '修改工作出差支付'
    workTravelPayForm.visible = true
    //@ts-ignore
    workTravelPayById(workTravelPay.id!).then((resp: Result<WorkTravelPay>) => {
      workTravelPayForm.form = resp.data
    })
  },
  delete: (workTravelPay: WorkTravelPay) => {
    //删除工作出差支付
    Modal.confirm({
      title: '警告！',
      content: `确认删除工作出差支付【${ workTravelPay.id}】吗？`,
      onOk(e) {
        workTravelPayRemove(workTravelPay.id!).then(() => {
          Message.success(`删除工作出差支付【${ workTravelPay.id}】成功`)
          workTravelPayForm.submitQuery()
        })
      }
    })
  },

  batchDelete: () => {
    Modal.confirm({
      title: '警告',
      content: `确认删除工作出差支付【${ workTravelPay.selectKeys}】吗？`,
      onOk(e) {
        workTravelPayRemoveBatch(workTravelPay.selectKeys!).then(() => {
          Message.success(`批量删除工作出差支付成功`)
          workTravelPayForm.submitQuery()
        })
      }
    })
  }
})

onMounted(() => {
  workTravelPayForm.submitQuery()
})


</script>

<template>
  <a-breadcrumb class="my-3">
    <a-breadcrumb-item>管理</a-breadcrumb-item>
    <RouterLink>
      <a-breadcrumb-item>工作出差支付管理</a-breadcrumb-item>
    </RouterLink>
    <a-breadcrumb-item>工作出差支付管理</a-breadcrumb-item>
  </a-breadcrumb>
  <a-layout-content>
    <a-card>
      <template #title>
        工作出差支付管理
      </template>

      <a-form ref="searchFormRef" :model="workTravelPayForm.query" label-align="left"
              @submit="workTravelPayForm.submitQuery"
              v-permission="'permission:workTravelPay:list'"
      >
        <a-row :gutter="15" style="height: 32px">
          <a-col :span="6">
            <a-form-item field="workTravelId" label="WorkTravelId">

              <a-input v-model="workTravelPayForm.query.workTravelId"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-space>
              <a-button type="primary" html-type="submit">
                <template #icon>
                  <IconSearch />
                </template>
                搜索
              </a-button>
              <a-button @click="$refs.searchFormRef.resetFields()" type="secondary">
                <template #icon>
                  <IconRefresh />
                </template>
                重置
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
      <a-divider :margin="16"></a-divider>
      <a-space class="mb-3">
        <a-button type="primary" @click="workTravelPay.add" v-permission="'permission:workTravelPay:create'">
          <template #icon>
            <IconPlus />
          </template>
          新建
        </a-button>

        <a-button class="removeBtn" @click="workTravelPay.batchDelete"
                  :disabled="!workTravelPay.selectKeys.length"
                  v-permission="'permission:workTravelPay:batchDelete'">
          <template #icon>
            <IconDelete />
          </template>
          批量删除
        </a-button>
        <a-button class="removeBtn" @click="workTravelPay.getList" v-permission="'permission:workTravelPay:list'">
          <template #icon>
            <IconRefresh />
          </template>
        </a-button>
      </a-space>
      <a-table row-key="id" :data="workTravelPay.pageInfo.list"
               :row-selection="workTravelPay.rowSelection"
               v-model:selected-keys="workTravelPay.selectKeys" :pagination="false">
        <template #columns>

          <a-table-column data-index="id" title="ID" />
          <a-table-column data-index="money" title="消费金额" />
          <a-table-column data-index="remark" title="消费说明" /><a-table-column data-index="isInvoice" title="是否有发票" >
          <template #cell="{record}">
            <a-tag> {{ cacheMap['commonsConfirm'][record.isInvoice] }}</a-tag>
          </template>
        </a-table-column>
          <a-table-column data-index="payTime" title="消费时间" />
          <a-table-column title="操作" width="200">
            <template #cell="{record}">
              <a-space>
                <a-button @click="workTravelPay.edit(record)" type="text"
                          v-permission="'permission:workTravelPay:update'">
                  <template #icon>
                    <IconEdit />
                  </template>
                  编辑
                </a-button>
                <a-button @click="workTravelPay.delete(record)" type="text"
                          v-permission="'permission:workTravelPay:delete'"
                          class="text-danger">
                  <template #icon>
                    <IconDelete />
                  </template>
                  删除
                </a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>

      <div class="d-flex justify-content-end mt-2">
        <a-pagination :total="workTravelPay.pageInfo.total" :page-size="workTravelPay.pageInfo.pageSize"
                      :current="workTravelPay.pageInfo.pageNum"
                      @change="workTravelPay.getList" class="mt-3"></a-pagination>
      </div>

      <a-modal :title="workTravelPayForm.formTitle" title-align="start"
               v-model:visible="workTravelPayForm.visible"
               :footer="null">
        <a-form ref="workTravelPayFormRef" :model="workTravelPayForm.form"
                @submit="workTravelPayForm.submitForm">
          <a-form-item field="money" hide-asterisk label="消费金额"
                       :rules="[{ required: true,message: '消费金额不能为空！' }]"
                       validate-trigger="blur"
          >
            <a-input-number v-model="workTravelPayForm.form.money"/>

          </a-form-item>
          <a-form-item field="remark" hide-asterisk label="消费说明"
                       :rules="[{ required: true,message: '消费说明不能为空！' }]"
                       validate-trigger="blur"
          >
            <a-input v-model="workTravelPayForm.form.remark"></a-input>
          </a-form-item>
          <a-form-item field="isInvoice" hide-asterisk label="是否有发票"
                       :rules="[{ required: true,message: '是否有发票不能为空！' }]"
                       validate-trigger="blur"
          >
            <a-select v-model="workTravelPayForm.form.isInvoice">
              <a-option :label="val['key']" :value="!isNaN(val.value) ? Number(val.value) : val.value" v-for="(val,index) in cache.sysCache.commonsConfirm" :key="index"/>
            </a-select>
          </a-form-item>
          <a-form-item field="payTime" hide-asterisk label="消费时间"
                       :rules="[{ required: true,message: '消费时间不能为空！' }]"
                       validate-trigger="blur"
          >
            <a-date-picker format="YYYY-MM-DD" v-model="workTravelPayForm.form.payTime"/>

          </a-form-item>

          <a-form-item>
            <a-button type="primary" html-type="submit">提交</a-button>
          </a-form-item>
        </a-form>
      </a-modal>

    </a-card>
  </a-layout-content>
</template>

<style scoped lang="scss">
</style>
